<template>
  <el-dialog
    v-model="dialogVisible"
    title="新建病人发卡"
    :width="600"
    :before-close="handleClose"
  >
    <el-form
      :inline="true"
      :model="formInline"
      label-width="auto"
      :label-position="'Right'"
      class="demo-form-inline"
    >
      <div class="flex a-c j-s-b">
        <el-form-item label="卡号:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="密码:">
          <el-input v-model="formInline.num" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="验证:">
          <el-input v-model="formInline.num" placeholder=""></el-input>
        </el-form-item>
      </div>
      <div class="flex a-c">
        <el-form-item label="姓名:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="性别:">
          <el-input v-model="formInline.num" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="门诊号:">
          <el-input v-model="formInline.num" placeholder=""></el-input>
        </el-form-item>
      </div>

      <div class="flex a-c j-s-b">
        <el-form-item label="出生日期:">
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="选择日期"
            :size="size"
          />
        </el-form-item>
        <div>
          <el-form-item label="年龄:">
            <div class="flex a-c">
              <el-input></el-input>
              <s-select :options="[]" style="width: 30px"></s-select>
            </div>
          </el-form-item>
        </div>
      </div>

      <div style="padding-right: 32px">
        <el-form-item label="家庭地址:" style="width: 100%">
          <el-input style="width: 100%"></el-input>
        </el-form-item>
      </div>

      <div class="flex a-c j-s-b">
        <el-form-item label="家庭电话:">
          <el-input
            v-model="formInline.user"
            placeholder="家庭电话"
            clearable
          />
        </el-form-item>
        <el-form-item label="付款方式:">
          <s-select :options="[]" style="width: 139px"></s-select>
        </el-form-item>
      </div>
      <div class="flex a-c j-s-b">
        <el-form-item label="证件类型:">
          <el-input
            v-model="formInline.user"
            placeholder="请选择证件类型"
            clearable
          />
        </el-form-item>
        <el-form-item label="证件号码:">
          <el-input
            v-model="formInline.user"
            placeholder="请输入证件号码"
            clearable
          />
        </el-form-item>
      </div>
      <div class="flex a-c j-s-b">
        <el-form-item label="费别:">
          <s-select :options="[]" style="width: 139px"></s-select>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox v-model="checked1" label="多胎" />
        </el-form-item>
      </div>
      <div class="flex a-c j-s-b">
        <el-form-item label="母亲姓名:">
          <el-input
            v-model="formInline.user"
            placeholder="请输入姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="母亲身份证:">
          <el-input
            v-model="formInline.user"
            placeholder="请输入证件号码"
            clearable
          />
        </el-form-item>
      </div>
      <div class="flex a-c j-s-b">
        <el-form-item label="监护人姓名:">
          <el-input
            v-model="formInline.user"
            placeholder="请输入姓名"
            clearable
          />
        </el-form-item>
        <el-form-item label="监护人身份证:">
          <el-input
            v-model="formInline.user"
            placeholder="请输入证件号码"
            clearable
          />
        </el-form-item>
      </div>
      <div class="flex a-c j-s-b">
        <el-form-item label="居住省:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="居住市:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
      </div>
      <div class="flex a-c j-s-b">
        <el-form-item label="居住区县:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="职业类型:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
      </div>
      <div class="flex a-c j-s-b">
        <el-form-item label="国籍:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="民族:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
      </div>
      <div class="flex a-c j-s-b">
        <el-form-item label="婚姻状况:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="职业:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
      </div>
      <div class="flex a-c j-s-b">
        <el-form-item label="单位名称:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="单位邮编:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
      </div>
      <div class="flex a-c j-s-b">
        <el-form-item label="单位电话:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
        <el-form-item label="家庭邮编:">
          <el-input v-model="formInline.user" placeholder="" clearable />
        </el-form-item>
      </div>
      <div style="padding-right: 32px">
        <el-form-item label="区域:" style="width: 100%">
          <el-input style="width: 100%"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="isOk"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { useDialog } from "@common/src/hooks/dialog.ts";

const props = withDefaults(
  defineProps<{
    modelValue: boolean;
    params?: Object;
  }>(),
  {
    modelValue: false,
    params: () => {},
  }
);
const formInline = reactive({
  user: "",
  region: "",
  date: "",
  num: "",
  dates: "",
});

const checked1 = ref(false);

const onSubmit = () => {
  console.log("submit!");
};
const emit = defineEmits(["update:modelValue"]);

const { handleClose, dialogVisible } = useDialog(props, emit);
</script>

<style lang="scss" scoped>
</style>
